import { message, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import router from 'next/router';
import smartfetch from '@mmstudio/an000058';
import IconButton from './iconbutton';

export default function DelButton({ dlgtitle, query, api }: { dlgtitle?: string; query: Record<string, string>; api: string; }) {
	return <>
		<IconButton img='/images/icons/del.svg' label='删除' onClick={() => {
			Modal.confirm({
				title: '删除',
				icon: <ExclamationCircleOutlined />,
				content: dlgtitle || '确认删除?',
				okText: '确认',
				cancelText: '取消',
				maskClosable: true,
				async onOk() {
					const data = await smartfetch<{ ok: true } | { ok: false; message: string; }, Record<string, string>>(api, 'delete', query);
					if (data.ok === true) {
						message.success({ content: '操作成功' });
						router.reload();
					} else {
						message.error({ content: data.message });
					}
				}
			});
		}} />
		<style jsx>{`
.footer{
	display: flex;
	justify-content: center;
}
`}</style>
	</>;
}
